<template>
	<view>
		<view class="fl-s-s" style="padding: 0 32rpx; background: #FFFFFF;">
			<!-- 评论标签 -->
			<view class="fr-s-s w-1 m-t-30" style="position: sticky; left: 0; top: 0; z-index: 999; background: #FFFFFF; flex-wrap: wrap;">
				<view class="label-item m-r-20 m-b-20 fr-c" v-for="(item,index) in labelTabs" :key="index">
					{{item.text}}({{item.num}})
				</view>
			</view>
			<view class="w-1 fl-s-s m-b-30">
				<view class="comment-item w-1 fl-s-s" v-for="(item,index) in list" :key="index">
					<!-- 头像 星级 时间 -->
					<view class="fr-s-c w-1">
						<image :src="item.user[0].avatar" mode="aspectFill" class="circle"
							style="width: 56rpx; height: 56rpx;"></image>
						<view class="flex-1 fl-c-s m-l-20">
							<view class="fr-b-c w-1 fm-ali">
								<text class="fs-20 c-66">{{item.user[0].nickname}}</text>
								<text class="fs-22 c-99">{{item.creattime}}</text>
							</view>
							<view class="fr-s-c" style="margin-top: 5rpx;">
								<image v-for="item in item.star_level" :key="this" class="m-r-10"
									src="/static/images/home/comment_stars.png" style="width: 19rpx; height: 19rpx;">
								</image>
								<image v-for="item in (5-item.star_level)" :key="this" class="m-r-10"
									src="/static/images/home/comment_star.png" style="width: 19rpx; height: 19rpx;">
								</image>
							</view>
						</view>
					</view>
					<!-- 文字内容 -->
					<text style="word-break: break-all;" class="m-t-30 fs-26 c-66 fm-ali">{{item.content}}</text>
					<!-- 图片 -->
					<view class="fr-s-s w-1 m-t-30" style="flex-wrap: wrap;">
						<image :src="item" v-for="(item,index) in item.imgs" :key="index" mode="aspectFill"
							class="comment-image"></image>
					</view>
					<!-- 回复区 -->
					<view class="reply-box w-1 m-t-20" v-if="item.reply.length">
						<view class="fr-s-s" v-for="(item,index) in item.reply" :key="index">
							<!-- c-faa -->
							<text class="c-33 fm-ali fs-24">{{item.user.nickname}}回复：<text
									class="c-99 fm-ali fs-24">{{item.content}}</text></text>
						</view>
						<!-- <view class="fr-s-s m-t-20">
							<text class="c-33 fm-ali fs-24">用户回复：<text
									class="c-99 fm-ali fs-24">好用吗，好用我就下单了</text></text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				labelTabs: [{
					text: '全部评价',
					num: '0'
				}, {
					text: '好评',
					num: '0'
				}, {
					text: '中评',
					num: '0'
				}, {
					text: '差评',
					num: '0'
				}],
				list:[]
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getList()
		},
		methods: {
			getList(){
				this.$get({
					url:'/homepage/goodsEvaluate',
					data:{
						pid:this.id
					}
				}).then(res=>{
					this.list = res.data.evaluate
					const {cha_total,good_total,total,zhong_total} = res.data.info
					let labelTabs = this.labelTabs
					labelTabs[0].num = total
					labelTabs[1].num = good_total
					labelTabs[2].num = zhong_total
					labelTabs[3].num = cha_total
					this.labelTabs = labelTabs
				})
			}
		}
	}
</script>

<style>
.comment-image {
		width: 164rpx;
		height: 166rpx;
		border-radius: 8rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
	.label-item {
		padding: 0 22rpx;
		height: 60rpx;
		background: rgba(250, 54, 10, 0.1);
		border-radius: 32rpx;
		font-size: 24rpx;
		font-family: Alibaba;
		color: #666666;
	}
	
	.item-act {
		padding: 0 22rpx;
		height: 60rpx;
		background: rgba(250, 54, 10, 0.1);
		border-radius: 32rpx;
		border: 2rpx solid #FA360A;
		font-size: 24rpx;
		font-family: Alibaba;
		color: #FA360A;
	}
	.reply-box {
		background: #F4F4F4;
		border-radius: 16rpx;
		padding: 28rpx 32rpx;
	}
</style>
